---
title: 'List Browser Extension untuk Web Development'
publishedAt: '2021-04-24'
description: 'Beberapa extension ini sangat membantu saya dalam website development terutama nomor 1 & 5. Wajib dicoba!'
banner: 'alejandro-barba-4NrCrpwzyMw-unsplash_hj1z2g'
tags: 'tools'
---

## Introduction

> Menemukan extension" ini mempersingkat waktu saya ketika sedang membuat website baik pada debugging, maupun mempelajari website orang lain

Disclaimer: Saya menggunakan Firefox Developer Edition untuk browser default. Beberapa extension mungkin ada pada chrome, tapi saya menyarankan untuk mencoba menggunakan Firefox Dev Edition.

## Kenapa Firefox Developer Edition?

[Dapatkan Firefox Developer Edition](<(https://www.mozilla.org/en-US/firefox/developer/)>)

### 1. Grid & Flexbox Tools yang Lebih Keren

Firefox punya dev tools yang lebih keren dan lengkap terutama untuk debugging pada grid dan flexbox.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/ff-1_nd3fc8.png'
  alt='Grid Tools'
  width={1440}
  height={714}
/>

### 2. Color Scheme Lebih Bagus dari Chrome

Overall theme dari Firefox Dev Tools mirip color scheme [Dracula](https://draculatheme.com/) yang saya gunakan juga di vscode. Warna ini menurut saya lebih bagus daripaka dev tools chrome yang ke kuning-orenan.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/ff-2_wpx1cw.png'
  alt='Color Scheme'
  width={1440}
  height={489}
/>

Dan, kita memiliki custom font tabs, jadi bisa secara langsung mengubah font attribute dengan slider.

### 3. Mobile View Simple

Mau buka mobile view, tanpa ngeblock setengah layar karena devtools? Bisa.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/ff-3_tvikoi.png'
  alt='Mobile View'
  width={1440}
  height={880}
/>

### 4. Banyak Development Tools (built-in eyedropper)

Task manager dan Eyedropper bagus banget buat ngecek" warna. Kita ga perlu install chrome extension dulu untuk pake eyedropper, tinggal pake yang sudah built-in dari firefox. Firefox juga menambahkan dedicated icon di toolbar jadi lebih gampang untuk aksesnya.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/ff-4_agrjkt.png'
  alt='Eye dropper'
  width={321}
  height={382}
/>

> [Check out the official firefox website](https://www.mozilla.org/en-US/firefox/developer/) to see more features.

## List ~~Extension~~ Add-ons yang Saya Gunakan

### 1. CSS Debug

[Link Download](https://addons.mozilla.org/en-US/firefox/addon/pranay-joshi/)

Add-on ini punya fitur untuk memberikan outline ke setiap elemen di HTML. Berguna banget kalo misal kita mau debug CSS, karena semua dikasih outline. Saya bahkan me-map mouse button saya untuk toggle add-on ini.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/css-debug_u7pcb0.png'
  alt='CSS Debug'
  width={1440}
  height={764}
/>

### 2. WhatFont

[Link Download](https://addons.mozilla.org/en-US/firefox/addon/zjm-whatfont/)

Tool yang bagus untuk mengintip font apa yang digunakan pada suatu website. Hanya perlu click" saja, dan kita bisa langsung tau font apa. Saya biasanya menggunakan add-ons ini untuk cari tau font yang dipake di website lain. Bisa juga untuk melihat font-size, weight yang digunakan.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/whatfont_qkg97o.png'
  alt='What Font'
  width={1440}
  height={764}
/>

### 3. Wappalyzer

[Link Download](https://addons.mozilla.org/en-US/firefox/addon/wappalyzer/)

Add-on ini digunakan untuk mencari tahu teknologi apa yang digunakan di sebuah website.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/wappalyzer_ttsbiv.png'
  alt='Wappalyzer'
  width={1070}
  height={563}
/>

### 4. Measure-it

[Link Download](https://addons.mozilla.org/en-US/firefox/addon/measure-it/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search)

Add-on ini untuk mengukur sesuatu dalam satuan pixel. Biasanya cukup penting untuk mengukur pixel terlebih dahulu saat developing.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/measure-it_wr16gb.png'
  alt='Measure It'
  width={1440}
  height={764}
/>

### 5. VisBug

[Link Download](https://addons.mozilla.org/en-US/firefox/addon/visbug/)

Saya baru saja menemukan add-on ini, dan kayaknya ini akan berguna banget. Add-on ini punya banyak fungsionalitas dalam 1 tool seperti mengubah padding, margin, font size, letter spacing. Kita juga bisa mengubah arrangement flexbox, ubah text dengan 1 tool tanpa perlu membuka devtools lagi. Add-on ini akan sangat berguna kalau kita ingin melakukan fine-tune di akhir development.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/my-addons/visbug_ehrnfs.fig'
  alt='Measure It'
  width={656}
  height={410}
/>

## Summary

Pastikan download semua add-ons! Coba beberapa dan implementasikan pada saat developing website. Cari yang menurut kamu paling bagus, dan paling membantu!
